<template>
    <div>
        <div class="user_info">
            <div class="user_info_base">
                <img v-if="userInfo.fd_sta_photo" class="user_pic" :src="userInfo.fd_sta_photo" alt="个人头像">
                <img v-else class="user_pic" :src="pic" alt="头像" />
                <ul>
                    <li class="one-txt-cut uesr_name">{{userInfo.fd_sta_name}}</li>
                    <li class="one-txt-cut">职位：{{userInfo.fd_jobs_name}}</li>
                    <li class="one-txt-cut">电话：{{userInfo.fd_sta_mobile}}<a v-if="fromPage" :href="'tel:'+ userInfo.fd_sta_mobile"><img :src="telIcon" alt="手机号" @click="callPhone(userInfo.fd_sta_mobile)"></a></li>
                </ul>
            </div>
            <ul class="user_info_list" v-if="showUserInfoList=='business' || showUserInfoList=='subordinatesInfo'" >
                <li><span class="item_title">当前考核时期 </span><span>{{userInfo.cycle_status_desc}}</span></li>
                <li><span class="item_title">入职日期 </span><span>{{userInfo.fd_sta_jobtime}}</span></li>
                <li><span class="item_title">在职天数(天) </span><span>{{userInfo.on_duty_day}}</span> </li>
                <li><span class="item_title">上月招商(人) </span><span>{{userInfo.pre_month_one_num}}</span></li>
                <li><span class="item_title">历史招商(人) </span><span>{{userInfo.history_one_num}}</span></li>
                <li><span class="item_title">历史收益(元) </span><span>{{userInfo.history_money}}</span></li>
                <li><span class="item_title">月度剩余(天) </span><span>{{userInfo.days_remaining}}</span></li>
                <li><span class="item_title">历史申请(次) </span><span>{{userInfo.history_apply_num}}</span></li>
            </ul>
            <template v-else-if="showUserInfoList=='approveDetailDelay'">
                <ul class="user_info_list approve_detail_delay_list" style="border-bottom: 10px solid #f7f7f7;">
                    <li><span class="item_title">考核周期 </span><span>{{userInfo.cycle_name}}</span></li>
                    <li><span class="item_title">考核时间段 </span><span>{{userInfo.begin_date}}至{{userInfo.end_date}}</span></li>
                    <li><span class="item_title">考核得分(分) </span><span>{{userInfo.score}}</span> </li>
                    <li><span class="item_title">历史申请次数(次) </span><span>{{userInfo.history_alpply_num}}</span></li>
                    <template v-if="userInfo.targets.length">
                        <li v-for="(item,index) in userInfo.targets" :key="index">
                            <span class="item_title" style="flex:5;">{{item.name}} 完成量/目标量 </span>
                            <span>{{item.target_data}}/{{item.target_value}}</span>
                        </li>
                    </template>
                    <li><span class="item_title last_approve_time">审批截止时间 </span><span class="last_approve_time">{{userInfo.last_time}}</span></li>
                </ul>
                <ul class="user_info_list approve_detail_delay_list">
                    <li><span class="item_title">申请内容 </span><span class="flex2">{{userInfo.apply_title}}</span></li>
                    <li><span class="item_title">申请理由 </span><span class="flex2" style="word-break: break-word;">{{userInfo.remark}}</span></li>
                    <li>
                        <span class="item_title">图片 </span>
                        <div class="upload_images" v-if="userInfo.images.length">
                            <img v-for="(value,index) in userInfo.images" :key="index" :src="userInfo.images[index]" v-lazy="userInfo.images[index]" alt="上传的图片" @click="bigImage(index)">
                            <van-image-preview
                                v-model="show"
                                :images="userInfo.images"
                                @change="onChange"
                                :startPosition="startPosition"
                                :showIndex="false"
                                >
                            </van-image-preview>
                        </div>
                    </li>
                </ul>
            </template>
            
            <ul class="user_info_list" v-else>
                <li><span class="item_title">申请内容 </span><span>{{userInfo.apply_title}}</span></li>
                <li><span class="item_title">当前考核时期 </span><span>{{userInfo.now_check_time_status}}</span></li>
                <li><span class="item_title">延期开始时间 </span><span>{{userInfo.start_time}}</span> </li>
                <li><span class="item_title">延期结束时间 </span><span>{{userInfo.end_time}}</span></li>
                <li><span class="item_title">时长(天) </span><span>{{userInfo.total_time}}</span></li>
                <li><span class="item_title">历史申请(次) </span><span>{{userInfo.history_apply_time}}</span></li>
                <li><span class="item_title">申请理由 </span><span>{{userInfo.apply_reason}}</span></li>
                <li><span class="item_title">申请时间 </span><span>{{userInfo.created_at}}</span></li>
                <li><span class="item_title">审批截止时间 </span><span>{{userInfo.check_last_time + '  23:59'}}</span></li>
                <li>
                    <span class="item_title">图片 </span>
                    <div class="upload_images" v-if="userInfo.apply_img&&userInfo.apply_img.length>0">
                        <img v-for="(value,index) in userInfo.apply_img" :key="index" :src="userInfo.apply_img[index]" alt="上传的图片" @click="bigImage(index)">
                        <van-image-preview
                            v-model="show"
                            :images="userInfo.apply_img"
                            @change="onChange"
                            :startPosition="startPosition"
                            :showIndex="false"
                            >
                        </van-image-preview>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'UserInfo',
    props:{
        fromPage:{
            type:Boolean,
            default:false
        },
        userInfo:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            showUserInfoList:'',
            show:false,
            startPosition:0,
            telIcon:require('@/assets/images/tel_icon.png'),
            pic:require('@/assets/images/morentouxiang.png'),
        }
    },
    mounted(){
        console.log(this.userInfo)
        this.tel = 'tel:'+this.userInfo.tel;
        // console.log(this.$router.history.current.name);
        this.showUserInfoList = this.$router.history.current.name;
    },
    methods:{
        bigImage(index){
            this.show = true;
            this.startPosition = index;
        },
        onChange(index) {
            this.index = index;
        },
       //调用原生的电话
        callPhone(phone){
            console.log(111)
            console.log(phone)
            this.$bridge.callhandler('takePhone', phone, responseCallback => {
                // 处理返回数据
                console.log('JS Echo called with:', phone);
                // responseCallback(phone);
                return false;
            })
        }
    }
}
</script>
<style lang="less" scoped>
.user_info{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background: #fff;
    margin: 5px auto;
    .user_info_base{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 15px;
        box-sizing: border-box;
        img{
            display: block;
            width: 70px;
            height: 70px;
        }
        .user_pic{border-radius: 50%;}
        ul{
            height: auto;
            padding-left: 20px;
            box-sizing: border-box;
            overflow: hidden;
            flex: 3;
            li{
                width: 100%;
                height: 25px;
                font-size: 14px;
                color: #151617;
                a{
                    float: right;
                    img{width: 15px;height: 15px;}
                }
            }
            .uesr_name{font-size: 15px;font-weight: bold;}
        }
    }
    .user_info_list{
        width: 100%;
        height: auto;
        padding: 20px 0;
        box-sizing: border-box;
        font-size: 13px;
        li{
            width: 100%;
            display: flex;
            align-items: center;
            padding: 5px 0;
            box-sizing: border-box;
            span{margin-left: 30px;}
            .upload_images{
                display: inline-block;
                color: #151617;
                margin-left: 30px;
                flex: 3;
            }
            .upload_images img{width: 42px; display: block;float: left;margin-right: 10px;}
            .item_title{
                margin-left: 0;
                text-align: right;
                color: #999;
                width: 90px;
                font-size: 13px;
            }
        }
    }
    .approve_detail_delay_list{
        padding: 10px 15px;
        box-sizing: border-box;
        li{
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #f7f7f7;
            span{margin-left: 0;flex: 1;text-align: right;}
            .upload_images{
                margin-left: 0;
            }
            .item_title{
                text-align: left;
                width: auto;
                min-width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
            }
            .flex2{flex: 2;}
        .last_approve_time{color: #ff4066;}
        }
        li:last-child{border: none;}
    }
    
}
</style>